<script setup lang="ts">
import Third1Icon from '~/assets/imgs/third/third1.png';
import Third2Icon from '~/assets/imgs/third/third2.png';
import Third3Icon from '~/assets/imgs/third/third3.png';
import Third5Icon from '~/assets/imgs/third/third5.png';
import Third8Icon from '~/assets/imgs/third/third8.png';

// interface ImageModule {
//   default: string;
// }

// const album = import.meta.glob<ImageModule>('~/assets/imgs/third/*.png', { eager: true });
// const paths = Object.keys(album).map(key => album[key].default);
const paths = reactive([
  { icon: Third1Icon, url: 'https://t.me/G9play' },
  { icon: Third5Icon, url: 'https://x.com/G9gameofficialX' },
  { icon: Third3Icon, url: 'https://www.instagram.com/g9gameofficial/' },
  { icon: Third8Icon, url: 'https://www.youtube.com/@G9gameofficial/videos' },
  { icon: Third2Icon, url: 'https://www.facebook.com/profile.php?id=61565964085611' },
]);

const navigation = computed(() => [
  {
    name: $t('usn2Zq2SfYd7iQ6xkPdo'),
    routerName: RN.HELP_PRIVACY_POLICY,
    target: '_self',
  },
  {
    name: $t('is5MZve96MfDYpRyaFcAs'),
    routerName: RN.HELP_FAIRNESS,
    target: '_self',
  },
  {
    name: $t('azk9QSn2HHnB8kuiJ8cZz'),
    routerName: RN.HELP_SUPPORT,
    target: '_self',
  },
  {
    name: $t('ncQyfXdWhCsbZfJpu6knP'),
    routerName: RN.HELP_FEE,
    target: '_self',
  },
  {
    name: $t('njgzJhkCp6JDaM1qGngs7'),
    routerName: RN.HELP_GOOGLE_AUTHENTICATOR,
    target: '_self',
  },
  {
    name: $t('fuZCiEHg8RInuefNvurI'),
    routerName: RN.HELP_FAQS,
    target: '_self',
  },
  {
    name: $t('uIkputJyPtyBCeeSwh2ig'),
    routerName: RN.HELP_CURRENCY,
    target: '_self',
  },
  {
    name: $t('mw7vdqVVc78QQAl6Gzx'),
    routerName: RN.HELP_REGISTRATIONANDLOGIN,
    target: '_self',
  },
]);
const { gameTypes } = queries.useGameAllQuery();

const router = useRouter();

function toGame(game: any) {
  const { status, code } = game;
  if (status === 2)
    return;
  router.push({ name: RN.PLAY, params: { gameCode: code } });
}
</script>

<template>
  <div class="page-content-w">
    <!-- 导航 -->
    <div class="grid items-start justify-evenly gap-4 py-15 tabletl:grid-cols-[1fr_1fr_1fr_auto] lt-tabletl:(grid-cols-2 grid-rows-2 mb--1 place-content-center gap-x-0 gap-y-6 py-5)">
      <div class="col-span-2 flex flex-col gap-4 lt-tabletl:(gap-3)">
        <span class="base-title">{{ $t('4hxNnk9DzXjuzrnXgWijb') }}</span>
        <div class="grid grid-flow-col grid-cols-2 grid-rows-8 gap-3 lt-tabletl:(gap-1)">
          <span v-for="(i, k) in gameTypes[0]?.game?.slice(0, 16)" :key="k" class="navigation cursor-pointer" @click="toGame(i)">
            {{ i.name }}
          </span>
        </div>
      </div>
      <div class="flex flex-col gap-4 lt-tabletl:(gap-3)">
        <span class="base-title">{{ $t('ivBWvUpjj7cKe8oVhJuiw') }}</span>
        <div class="grid gap-3 lt-tabletl:(gap-1)">
          <RouterLink v-for="(i, k) in navigation" :key="k" class="navigation" :to="{ name: i.routerName }" :target="i.target">
            {{ i.name }}
          </RouterLink>
        </div>
      </div>
      <div class="flex flex-col gap-4 lt-tabletl:(gap-3)">
        <span class="base-title">{{ $t('ndnDvYfNj8W5fJFmC9ARu') }}</span>
        <div class="grid grid-cols-4 grid-rows-2 justify-items-end gap-3 lt-tabletl:justify-items-start">
          <!-- todo 暂无跳转地址 -->
          <a v-for="(item, i) in paths" :key="i" :href="item.url" target="_blank" class="inline-block">
            <img class="w-10 lt-tabletl:w-7" :src="item.icon">
          </a>
        </div>
      </div>
    </div>
    <ADivider />
  </div>
</template>

<style scoped lang="scss">
.navigation {
  --uno: 'text-sys-text-body font-medium text-4 no-underline lt-tabletl:text-13px';
}
</style>
